<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script>
export default {
  name: "App",
  provide() {    //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。                                             
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true                    //控制视图是否显示的变量
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false;            //先关闭，
      this.$nextTick(function () {
        this.isRouterAlive = true;         //再打开
      })
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #000;
}
/* @theme:#00b16a; */

* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #000;
}

ul {
  list-style: none;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.clearfix::after {
  content: "";
  height: 0;
  clear: both;
  overflow: hidden;
  display: block;
  visibility: hidden;
}

/*单行溢出*/
.one-txt-cut {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/*多行溢出 手机端使用*/
.txt-cut {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.w {
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
}
.van-toast {
  z-index: 3000 !important;
}
@media (min-width: 1201px) and (max-width: 1920px) {
  .l-screen {
    display: block;
  }
  .m-screen {
    display: block;
  }
  .index-view {
    padding: 20px 0;
  }
  .s-screen {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  .l-screen {
    display: block;
  }
  .m-screen {
    display: block;
  }
  .s-screen {
    display: none;
  }
  .index-view {
    padding: 20px 0;
  }
  .w {
    padding: 0 20px;
  }
}
@media (max-width: 767px) {
  .l-screen {
    display: none;
  }
  .m-screen {
    display: none;
  }
  .s-screen {
    display: block;
  }
  .index-view {
    padding: 10px 0;
  }
  .w {
    padding: 0;
  }
  .s-none {
    display: none;
  }
}
</style>
